<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="static/bootstrap.min.css" rel="stylesheet">
  <title>嫦娥股份</title>
  <style>
    .container {
     /* height: calc(80vh); */
     /*  width: calc(90vh); */
      /* height: 100vh;
      width: 100vh; */
      margin-right: auto;
      margin-left: auto;
      background-color: #fdfdfd;
      overflow-y: auto;
    }

    .text-center {
      margin-bottom: 20px;
      color: #4aa593;
    }

    .answer {
      /* width: 100%; */
      /* position: relative; */
      flex-grow: 9;
    }
    .content2{
      align-items: center;
      text-align: center;
      flex-grow: 1;
      /* position: relative;
      bottom: 60px; */
      /* margin: 0 10px; */
      border-radius: 10px;
    }
    .ipt {  
             
      /* top:400px; */
      display: flex;
      margin: 0 10px;
      padding-right: calc(10px);
      border-radius: calc(10px);
      width: calc(100% - 20px);
      background-color: white;
      height: calc(50px);
      margin-top: 20px;
      border: 1px solid rgba(26, 179, 148, 0.8);
      box-shadow: 0px 0px 10px 0px rgba(26, 179, 148, 0.2);
      align-items: center;
    }

    .ipt textarea {
      resize: none;
      /* overflow-y: auto; */
      border: none;
      box-shadow: none;
    }

    .ipt textarea:focus {
      border: none !important;
      box-shadow: none !important;
    }
    .chatcontainer{
      display: flex;
      height: 80%;
      flex-direction: column;
      height: calc(88vh);
      width: 100%;
      /* align-items: center; */
      justify-content: space-between;
      
    }
    #chatWindow {
      /* max-height: calc(70vh - 120px); */
      /* margin-bottom: 120px; */
      /* overflow-y: auto; */
      display: flex;
      flex-direction: column;
    }

    #chatBtn {

      background-color: #1ab394;
      border-color: #1ab394;
    }

    .message-bubble {
      width: auto;
      max-width: 1000px;
      padding: 10px;
      margin: 5px;
      display: flex;
      /* align-items: flex-start; */
      border-bottom: 1px dashed #e7eaec;
    }

    .message-bubble p {
      display: flex;
      flex-direction: column;
      font-size: 18px;
      margin-left: 15px;
      white-space: pre-wrap;
    }

    .chat-icon {
      width: calc(30px);
      height: calc(30px);
      border-radius: 3px;
    }

    .message-text {
      word-wrap: break-word;
      /* 当单词过长时自动换行 */
    }
  </style>
</head>

<body>
  <div>
    <div class="container">
      <div>
        <h2 class="text-center">嫦娥智慧健康GPT</h1>
      </div>
        <div class="chatcontainer">              
          <div class="answer" >
            <div class="message-bubble">
              <img class="chat-icon" src="static/chatgpt.png">
              <p class="message-text">请问有什么可以帮助您？</p>
            </div>
            <div id="chatWindow">
            </div>          
          </div> 
          <div class="content2">
            <div class="ipt">
                <textarea id="chatInput" placeholder="请输入内容..." class="form-control" rows="1"></textarea>
                <button id="chatBtn" class="btn btn-primary" type="button">发送</button>
            </div>              
          </div> 
        </div>  
               
    </div>
  </div>
  </div>
</body>
<script src="static/jquery-2.1.1.js"></script>
<script src="static/bootstrap.min.js"></script>
<script>
  $(document).ready(function () {
    var chatBtn = $('#chatBtn');
    var chatInput = $('#chatInput');
    var chatWindow = $('#chatWindow');
    var userIcon = 'static/user.png'//用户头像
    var botIcon = 'static/chatgpt.png';//机器人头像


    // 添加用户消息到窗口
    function addUserMessage(message) {
      var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + userIcon + '"><p class="message-text">' + message + '</p></div>');
      chatWindow.append(messageElement);
      chatInput.val('');
      //chatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);
    }

    // 添加回复消息到窗口
    function addBotMessage(message) {
      var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + botIcon + '"><p class="message-text">' + message + '</p></div>');
      chatWindow.append(messageElement);
      chatInput.val('');
      //schatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);
    }

    // 处理用户输入
    chatBtn.click(function () {
      console.log(chatInput.val(), "111");
      var message = chatInput.val();
      if (message.length == 0) {
        alert("请输入内容！")
        return
      }
      addUserMessage(message);

      // messages.push({"role": "user", "content": message})

      chatBtn.attr('disabled', true) // 消息发送后让提交按钮不可点击

      // 发送信息到后台
      $.ajax({
<<<<<<< HEAD:test.html
        url: 'http://127.0.0.1:8888/chat',
        method: 'POST',
	contentType: 'application/json', 
        data: JSON.stringify({ query: message }),
=======
        url: 'http://127.0.0.1:8888/web',
        method: 'POST',
	contentType: 'application/json', 
        data: {
          "prompt": JSON.stringify(message)
        },
>>>>>>> 7df7a9e06b3e886e78b9ffe911da4dab5e546d8e:test3.html
        success: function (res) {
          // res = JSON.parse(res);
          addBotMessage(res.response);
          chatBtn.attr('disabled', false)  // 成功接受消息后让提交按钮再次可以点击
        },
        error: function (jqXHR, textStatus, errorThrown) {
          addBotMessage('<span style="color:red;">' + '出错啦！请稍后再试!' + '</span>');
          chatBtn.attr('disabled', false)
        }
      });
    });
    // 处理 Enter 键按下
    chatInput.keypress(function (e) {
      if (e.which == 13) {
        chatBtn.click();
      }
    });
  });
</script>

</html>
